<!-- 注册 -->
<template>
    <div class='myRegister'>
        <div class="myCenter">
            <h3 class="title">园区管理系统</h3>
            <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
            <el-form-item label="园区名称:" prop="name" required>
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="园区类型:" prop="parkType" required>
                    <!-- <el-input v-model="formData.parkType"></el-input> -->
                    <el-select v-model="formData.parkType" placeholder="请选择">
                        <el-option
                        v-for="item in parkTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公司名称:" prop="firmName" required>
                    <el-input v-model.number="formData.firmName"></el-input>
                </el-form-item>
                <el-form-item label="联系人:" prop="contacts" required>
                    <el-input v-model.number="formData.contacts"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" prop="phone" required>
                    <el-input v-model.number="formData.phone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="email" required>
                    <el-input v-model="formData.email" type="email"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">试用申请</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { register, getParkNameList} from '@/api/register'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
    var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
            return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
            if (mailReg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的邮箱格式'))
            }
        }, 100)
    }
    var checkPhone = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('请输入手机号码'))
        } else if (!(/^1[34578]\d{9}$/.test(value))) {
            callback(new Error('请输入正确的手机号码'))
        } else {
            callback()
        }
    }
    var checkName = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('请输入园区名称'))
        } else if (this.nameList.includes(value)) {
            callback(new Error('该园区名称已被使用'))
        } else {
            callback()
        }
    }
    //这里存放数据
    return {
        nameList: [],
        parkTypes: [
            {
                label: '民营企业',
                value: '民营企业'
            },
            {
                label: '私营企业',
                value: '私营企业'
            }
        ],
        formData: {
            name: null,
            contacts: null,
            parkType: null,
            firmName: null,
            phone: null,
            email: '',
            status: 0
        },
        rules: {
            name: [
            { required: true, validator: checkName, trigger: 'blur' },
            ],
            contacts: [
                { required: true, trigger: 'blur', message: '请输入联系人' }
            ],
            phone: [
                { required: true, validator: checkPhone, trigger: 'blur'  }
                // { required: true, trigger: 'blur', message: '请输入园区名称'  }
            ],
            firmName: [
                { required: true, trigger: 'blur', message: '请输入公司名称' }
            ],
            parkType: [
                { required: true, trigger: 'blur', message: '请选择园区类型' }
            ],
            email: [
                {  required: true, validator: checkEmail, trigger: 'blur' }
            ]
        },
        myHeaders:{},
    };
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    init(){
        // 查找所有园区名称
        // nameList
        getParkNameList().then(res => {
            console.log("园区名称", res)
            this.nameList = res
        })
    },
    // 提交表单
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            console.log("this.formData", this.formData)
            // formData
            register(this.formData).then(res => {
                console.log('提交注册信息成功！', res)
                this.$refs[formName].resetFields();
                setTimeout(() => {
                    this.loading = false
                    this.$message({message: '提交成功！等待审核！',type: 'success'});
                    this.formData = {
                        name: null,
                        contacts: null,
                        parkType: null,
                        firmName: null,
                        phone: null,
                        email: '',
                        status: 0
                    }
                }, 300)
                this.init()
                
            }).catch(err => {
                console.log(err)
            })
          } else {
            console.log('失败')
          }
      })
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.init()
    this.myHeaders = { 'client_id':  'jeecp ', 'client_secret': 'webApp'}
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
$bg:#283443;
$light_gray:#fff;
$cursor: #fff;
//@import url(); 引入公共css类
.myRegister{
    height: 100%;
    background-color: RGB(45,58,75);
    .myCenter{
        width: 25%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
    .el-form{
        .el-form-item {
            height: 47px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            color: #454545;
        }
        ::v-deep.el-input__inner{
            background-color: $bg;
            border: none;
        }
        ::v-deep.el-form-item--small .el-form-item__content, ::v-deep.el-form-item--small .el-form-item__label{
            line-height: 47px;
        }
        ::v-deep.el-form-item--mini.el-form-item, ::v-deep.el-form-item--small.el-form-item{
            margin-bottom: 30px;
        }
        button{
            margin: 0 auto;
            display: block;
            width: 30%;
        }
        .el-select{
            width: 100%;
        }
    }
}
</style>